<template>
  <div>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="工单编号" :span="2">{{
        row.workCode
      }}</el-descriptions-item>
      <el-descriptions-item label="工单类型" :span="2">{{
        row.typeName
      }}</el-descriptions-item>
      <el-descriptions-item label="工单类别" :span="2">
        <span v-if="row.workType == 0">流程类</span>
        <span v-if="row.workType == 1">指派类</span>
      </el-descriptions-item>
      <el-descriptions-item label="工单名称" :span="2">{{
        row.orderName
      }}</el-descriptions-item>
      <el-descriptions-item label="工单标题" :span="2"
        ><el-tooltip
          popper-class="ellipsis-tip-span"
          :content="row.title"
          placement="top-start"
        >
          <span class="ellipsis-span">{{ row.title }}</span>
        </el-tooltip></el-descriptions-item
      >
    </el-descriptions>
    <div style="height: 20px"></div>
    <handle-form :form="basic.form" :formItem="basic.formItem" />
    <div v-if="row.voList">
      <el-divider content-position="left">接单记录</el-divider>
      <el-table
        :data="row.voList"
        :header-cell-style="{ background: '#F6F7F9' }"
      >
        <el-table-column prop="appointTime" label="时间"> </el-table-column>
        <el-table-column prop="userName" label="处理人"> </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">已接单</span>
            <span v-if="scope.row.status == 2">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="rejectReason" label="原因">
          <template slot-scope="scope">
            <el-tooltip
              popper-class="ellipsis-tip"
              :content="scope.row.rejectReason"
              placement="top-start"
            >
              <span class="ellipsis">{{ scope.row.rejectReason }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'basic',
  props: {
    row: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      basic: {
        form: {},
        formItem: [],
      },
    }
  },
  mounted() {
    this.basic = {
      form: JSON.parse(this.row.form),
      formItem: JSON.parse(this.row.formItem),
    }
    this.basic.form.disabled = true
  },
}
</script>
